import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// 导入组件
import GlobalComponent from '@/components/index.js'
Vue.use(GlobalComponent)

// 导入全局挂载的组件 v-power，自定义指令，做按钮权限控制的
import Directive from './directive'
Vue.use(Directive)

// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
// 全局引入PageTools公共组件并注册
Vue.config.productionTip = false

// 导入多语言配置
import i18n from '@/lang'

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
// 如果父级文件夹有.git-git仓库
// 但是子级文件夹内还有.git, 外面仓库是无法携带此子文件夹代码
// 解决1: 把子文件夹.git删除, 用外面管理 (旭哥-所有代码都在课上代码仓库)
// 解决2: 直接用子文件夹.git仓库自己管理-外面不用管我了

// 问题: 这个VUE_APP_BASE_API环境变量会用到哪里?
// 答案: axios的基地址(前缀)里

// 问题: 为何开发环境, 基地址有个是以/api开头的?
// 答案: 我要请求当前webpack开发服务器, 让服务器
// 命中/api开头代理规则, 帮我做代理转发(因为后台没
// 有开启cors)
// 假如: 后端开启了cors, VUE_APP_BASE_API能不能写
// http://xxxx地址? -> 意思: 直接让axios发起http请求
// 注意:
// axios()请求发现地址以http开头->直接调用外链地址
// axios()请求发现地址以/开头, 请求所在本地服务器

// 问题: 为何生产环境, 基地址是http://xxxx的?
// 答案: 打包以后, 没有代理转发了, 无需/api开头的规则了, 完整的后端地址
// 让axios直接去请求
// 但是: 我们前端项目现在localhost:5500上测试, 后端地址没开cors
// 所以打包后还是跨域
// 解决: 前端dist代码, 放到和后端同一个地址下
// 或者: 本地node+express+cors,自己搭建一个类似开发服务器做代理转发
// axios请求要请求自己的这个服务器

// 经验之谈:
// 有些按钮功能, 有的时候需要, 有的时候不需要
// 可以先从显示/隐藏此按钮考虑下
// 必须显示, 可以考虑禁用?
// 但是如果按钮必须显示, 我们就在点击事件中, 再进行判断

// 大任务拆分小任务, 逐一攻破

//* *************分割线****************** */
// 项目模式: 分为两大类
// 开发环境(development)
// 底层支持: node+webpack+"webpack开发服务器"->打包在内存中(服务器根目录下)
// vuecli脚手架+内置了很多的webpack配置(所以我们用的时候0配置webpack)
// vuecli脚手架没有webpack包, 而是一个独立的包叫@vue, 对webpack进行了二次封装
// 脚手架集成的开发服务器, 既能"直接支持history模式路径", 还能支持"代理转发"

// 生产环境(打包)(production)
// 底层支持: node+webpack->打包输出到磁盘dist文件夹下(你把dist下东西放到服务器的什么位置决定资源相对路径如何写(publicPath))
// 解决: 'history模式路径'(如果你用了, 如果默认hash这个事跳过)
// 解决: 跨域问题(如果后台开启了cors/你的代码可以放到和api接口服务器相同的域下, 这个事跳过)
// 如果以上2个都满足不了, 我们自己弄一个代理服务器
// node+express / node+koa / node+connect / node+http(原生) 都可以搭建一个web服务
// 这个web服务还可以用xampp软件/tomcat(java用)/iis/...其他软件都可以直接搭建web服务(没学过)
// 想要让用户看到你的项目: 服务器(ip/域名), web服务(端口)
// 讲解: 搭建服务

// package.json对应2套不同的命令
// 对应2套不同的环境变量文件.env.环境名 文件
// webpack内置根据不同的命令, 把环境变量值挂载process.env属性上
